<template>
  <div>
    <ux-grid ref="singleTable" :data="CData" style="width: 100%" border :header-cell-style="{
      color: 'rgba(0, 0, 0, 0.85)',
      fontSize: '14px',
      textAlign: 'left',
      fontWeight: 'bold',
      padding: 0,
      height: '80px',
    }" :row-style="{
      color: 'rgba(96,98,102,1)',
      fontSize: '13px',
      textAlign: 'left',
      padding: 0,
      height: '32px',
    }" :cell-style="cellStyle" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight"
      v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
      :element-loading-text="$t('message.bhView.loading')">
      <template slot="empty">  {{ CFlg ? '最新データ取込中' : 'No Data' }}  </template>

      <!-- macNumb
        posOrdr
        posName
        clNo
        lcCodName
        mtrName
        flowDate
        ipCodName
        chgDate
        posChg1
        posChg2
        posChg3
        dmgCode
        posNo
        revNo
        isChg -->

      <ux-table-column title="スプールNo." :resizable="false" width="200" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 64px;">スプールNo.</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.macNumb }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="位置No." :resizable="false" width="80" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 64px;">位置No.</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: right;">
            {{ scope.row.posOrdr }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="定点名称" :resizable="false" width="120" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 64px;">定点名称</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.posName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="測定部位" :resizable="false" width="120" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 64px;">測定部位</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.pnCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="C.L.番号" :resizable="false" width="160" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 64px;">C.L.番号</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.clNo }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="ラインクラス" :resizable="false" width="160" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;">
            <span style="display: inline-block;height: 14px;text-align: center;">ライン</span>
            <span style="display: inline-block;height: 14px;margin-top: 5px;text-align: center;">クラス</span>
            <!-- <span style="line-height: 64px;">ラインクラス</span> -->
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.lcCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="材質名称" :resizable="false" width="120" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 64px;">材質名称</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.mtrName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="流体名称" :resizable="false" width="120" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 64px;">流体名称</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.flowDate }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column title="漏洩時の影響度" :resizable="false" width="120" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;">
            <span style="display: inline-block;height: 14px;text-align: center;">漏洩時の</span>
            <span style="display: inline-block;height: 14px;margin-top: 5px;text-align: center;">影響度</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.ipCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="取替年月" :resizable="false" width="120" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 64px;">取替年月</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.chgDate }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="初回検査設定" :resizable="false" width="130" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;">
            <span style="line-height: 64px;">初回検査設定</span>
            <!-- <span style="display: inline-block;height: 14px;margin-top: 5px;text-align: center;">設定</span> -->
          </div>
        </template>
        <template slot-scope="scope">
          <p style="padding-left: 47px;">
            <el-checkbox v-model="scope.row.posChg1bol"
              @change="scope.row.isChg = 1, $emit('changeFn', false)"></el-checkbox>
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="隣接配管の定点見直し" :resizable="false" width="130" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;">
            <span style="display: inline-block;height: 14px;text-align: center;">隣接配管の</span>
            <span style="display: inline-block;height: 14px;margin-top: 5px;text-align: center;">定点見直し</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="padding-left: 47px;">
            <el-checkbox v-model="scope.row.posChg2bol"
              @change="scope.row.isChg = 1, $emit('changeFn', false)"></el-checkbox>
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="仕様変更を実施したか" :resizable="false" width="130" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;">
            <span style="display: inline-block;height: 14px;text-align: center;">仕様変更を</span>
            <span style="display: inline-block;height: 14px;margin-top: 5px;text-align: center;">実施したか</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="padding-left: 47px;">
            <el-checkbox v-model="scope.row.posChg3bol"
              @change="scope.row.isChg = 1, $emit('changeFn', false)"></el-checkbox>
          </p>
        </template>
      </ux-table-column>

    </ux-grid>
    <!-- <div class="bottomView">{{ pageDes }}</div> -->
  </div>
</template>

<script>
// import $ from 'jquery'
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';

// 导出模块
export default {
  // 模块名字
  name: "MSDetailTabel",
  props: {
    tableHeight: Number,
    CData: Array,
    pageDes: String,
    LAB: Array,
    loading: Boolean,
    tabelDataConfig: Array,
    empty: String,
    Month: Object,
    currentDiff: Number,
    CFlg: Boolean,
  },
  // 模块数据
  data() {
    //数据
    return {
      temp: '代表点が１か所以上あるか',
      tempArr: ['111', '222', '333'],


      DateList: [],
      activeNum: 0,

      currentRow: {},
      nextRow: {},
      currentIndex: -1,
      nextIndex: 0,
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    CData: {
      immediate: true,
      handler(nData) {
        // this.currentIndex = -1


      },
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    setCurrentRowFn(index) {
      setTimeout(() => {
        this.$refs.singleTable.setCurrentRow(this.CData[index])

        this.handleCurrentChange(this.CData[0])
      }, 200);
    },
    refreshColumnFn() {
      this.currentIndex = -1,
        this.$refs.singleTable.refreshColumn()
    },
    // 表格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let style = {
        color: "rgba(96,98,102,1)",
        fontSize: "14xpx",
        textAlign: "left",
        padding: 0,
        height: "32px"
      };
      if ((column.title == 'スプールNo.' && this.currentIndex != row._idx) ||
        (column.title == '位置No.' && this.currentIndex != row._idx) ||
        (column.title == '定点名称' && this.currentIndex != row._idx) ||
        (column.title == '測定部位' && this.currentIndex != row._idx) ||
        (column.title == 'C.L.番号' && this.currentIndex != row._idx) ||
        (column.title == 'ラインクラス' && this.currentIndex != row._idx) ||
        (column.title == '材質名称' && this.currentIndex != row._idx) ||
        (column.title == '流体名称' && this.currentIndex != row._idx) ||
        (column.title == '漏洩時の影響度' && this.currentIndex != row._idx) ||
        (column.title == '取替年月' && this.currentIndex != row._idx)

      ) {
        style.background = "#ffffe1";
        style.border = "0.5px solid rgb(233, 233, 233)";
      }
      if (
        (column.title == '初回検査設定' && this.currentIndex != row._idx) ||
        (column.title == '隣接配管の定点見直し' && this.currentIndex != row._idx) ||
        (column.title == '仕様変更を実施したか' && this.currentIndex != row._idx)
      ) {
        style.background = "rgb(255, 222, 172)";
        style.border = "0.5px solid rgb(233, 233, 233)";
      }
      return style;
    },

    handleCurrentChange(val) {
      console.log(val)
      this.currentIndex = val._idx;
      this.$emit("getCRow", val);
      //  true未更改
      // eventBus.$emit('getDialog1Current_EventBus');

      // /**
      //  * 未更改，则正常执行。=>记录当前的row和index
      //  * 已更改，记录需要的东西。=》记录下次的row和index，记录执行的Fn,通知弹框。
      //  * 此处通过index来选中，row可能存在_row表格自动添加的属性影响，导致选不中。
      //  */

      // if (this.$store.state.isCurrentNext) {
      //   this.$emit("getMSTabelRow", val);
      //   this.currentRow = _.cloneDeep(val);
      //   this.currentIndex = this.getIndex(this.currentRow);
      // } else {
      //   console.log('sdfsdfsdf', this.currentRow, this.currentIndex);

      //   this.nextRow = _.cloneDeep(val);
      //   // this.nextIndex = this.getIndex(this.nextRow);
      //   this.setCurrentFn(this.currentRow, this.currentIndex);

      //   let Fn = () => {
      //     this.currentRow = _.cloneDeep(val);
      //     this.currentIndex = this.getIndex(val);

      //     this.$emit('GetLineIndexListApi', this.nextRow.lineNo);
      //   }
      //   this.$store.commit("changeIsCurrentFn", Fn);
      //   eventBus.$emit('saveFnDialog1Current_EventBus');
      // }
    },

    getIndex(row) {
      var result = 0;
      this.CData.forEach((item, index) => {
        if (_.isEqual(item, row)) {
          result = index;
        }
      })
      return result
    },

    //  通过name设置当前行
    setCurrentFn(row, index) {
      this.$refs.singleTable.setCurrentRow(this.CData[index]);
      if (index >= 9) {
        this.$refs.singleTable.pagingScrollTopLeft((index - 2) * 33);
      }
    },

    load() { },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {

  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() {

  },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-text {
  width: 100%;
  height: 100%;
  text-align: right;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.sizeColor {
  color: rgb(22, 22, 255);
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//   background-color: #e6f7ff;
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
  border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
  box-shadow: none;
}

::v-deep .el-table__body tr.current-row>td {
  background-color: rgb(233, 236, 237);
}

.tiemFlgS {
  font-size: 20px;
  font-family: "Menlo, Monaco, Courier New, monospace";
  line-height: 24px !important;
  text-align: center;
  height: 24px;
}

.bottomView {
  // background-color: #e9e9e9;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
}

.table-input {
  ::v-deep .el-input__inner {
    background: #DCDCFA;
    border: 0 none;
    padding: 0;
    height: 32px;
    line-height: 32px;
  }
}

.tabel-header-view {
  // width: 100%;
  // height: 32px;
  // display: flex;
  // justify-content: flex-start;
  // align-items: center;
  background-color: #DCDCFA;


  ::v-deep .el-input__inner,
  ::v-deep .el-input {
    border: 0 none;
    width: 100%;
    height: 24px;
    background: transparent;
    padding-left: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  ::v-deep .el-input {
    width: 100%;
    display: flex;
    align-items: center;
  }

  ::v-deep .el-input--mini .el-input__inner {
    line-height: 24px;
  }

  ::v-deep input::-webkit-input-placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  ::v-deep .el-input__suffix {
    line-height: 24px;
  }

  ::v-deep .el-input--mini .el-input__icon {
    line-height: 24px;
  }

  ::v-deep .el-select__tags {
    max-width: 100%;
  }
}

::v-deep .elx-cell {
  // width: 100%;
  // height: 100%;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // padding: 0;
}

::v-deep .elx-cell--title {
  // width: 100%;
  // height: 100%;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // padding: 0;
}

::v-deep .elx-cell--title {
  height: 64px;
  line-height: 45px;
}
</style>
